<template>
    <div class="kind">
        <van-nav-bar title="商品分类" left-arrow @click-left='goback()' class="header"></van-nav-bar>
        <van-tree-select height="1rem" :items="items"  :main-active-index.sync="active"
            @click-nav="getIndex(items[active].text)">
            <template #content>
                <van-grid gutter="10px" :center="msg">
                    <van-grid-item icon="photo-o" v-for="goods in goodslist" :key="goods" :text='goods' @click="goList(goods)"/>
                </van-grid>
            </template>

        </van-tree-select>

        <FooterBarVue class="footer"></FooterBarVue>
    </div>
</template>

<script>
import FooterBarVue from '@/components/FooterBar.vue';
export default {
    data() {
        return {
            active: 0,
            items: [{ text: '分组 1' }, { text: '分组 2' }],
            goodslist: ['Apple','小米','华为','诺基亚'],
            msg:false,
           
        };
    },
    methods: {
        goback(){
            this.$router.back();
        },

        getIndex(index) {
            this.$service({
                mothod:'get',
                url: 'pro/categorybrandlist',
                params: {
                    category: index
                }
            })
                .then(res => {
                    this.goodslist = []
                    let data = res.data
                    if (data.code == 200) {
                        // console.log(data.data);
                        data.data.forEach(items => {
                            // console.log(items.brand);
                            this.goodslist.push(items.brand)
                        })
                        // console.log(this.goodslist);

                    }
                })
                .catch(err => {
                    console.log('err', err);
                })
        },
        goList(goods){
            this.$router.push('/searchList?category='+this.items[this.active].text+'&brand='+goods)
        }
    },
    components: { FooterBarVue },
    created() {
        this.$service({
            method:'get',
            url: 'pro/categorylist'
        })
            .then(res => {
                let data = res.data.data
                let obj = {}
                for (let key in data) {
                    obj[key] = data[key]
                }
                //   console.log(obj);
                let objNew = Object.keys(obj).map(items => ({   //将对象中的每一项的键换成text
                    text: obj[items]
                }))
                // console.log(objNew);
                this.items = objNew
            })
            .catch(err => {
                console.log('err', err);
            })

    }

}

</script>
<style scoped>
.kind {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.van-nav-bar,
.FooterBarVue {
    height: 3.125rem;
}

.van-tree-select {
    flex: 1;
    overflow: auto;
}

.van-grid-item__text{
    display: inline-block;
    width: 1.75rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}
</style>